{include file="public/head"/}
<div id="housedetail">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info"  id="headeralert">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="ntDesktop">
            <my-header :warsename="warsename"></my-header>
            <div class="row">
                <div class="col-md-8">
                    <ul class="nav nav-tabs">
                        <li  v-if="isshow_search" class="active">
                            <a href="#home" data-toggle="tab"  @click="shdow"
                            >搜索结果<span class="glyphicon glyphicon-remove shdow" style="margin-left: 10px;" @click="shdow()"></span></a>
                        </li>
                        <li :class="{'active':item.id==id && !isshow_search}"  @click="btnwarehouse(item.id,item.name,1)" v-for="(item,index) in warehousedata"><a href="#"
                                                                                                                                     data-toggle="tab"
                        >{{item.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <input type="text" class="form-control" v-focus v-model="searchText" value="" @keyup.13="search" placeholder="通过产品角色ID,型号，品名查找产品">
                        <span class="input-group-btn">
						<button class="btn btn-primary" @click="search">
							<span class="fa fa-search"></span>查找
						</button>
					</span>
                    </div>
                </div>
                <div class="col-md-1 text-right">
                        <a class="btn btn-default" href="/admin/warehouses/seting"><span class="fa fa-arrow-left"></span> 返回列表</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped table-hover ntTable">
                        <thead>
                        <tr>
                            <th class="sorting" @click="sortfun(1)" width="30%" data-order="1"> 产品</th>
                            <th> 箱规</th>
                            <th v-if="isshow_search"> 仓库</th>
                            <th class="sorting" @click="sortfun(2)" data-order="1"> 总库存/总箱数</th>
                            <th class="sorting" @click="sortfun(3)" data-order="1"> 总数</th>
                            <th class="sorting" @click="sortfun(4)" data-order="1"> 已售</th>
                            <th class="sorting" @click="sortfun(5)" data-order="1"> 遗失</th>
                            <th class="sorting" @click="sortfun(6)" data-order="1"> 调整</th>
                            <th> 操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list">
                            <td>
                                <div class="pro">
                                    <div class="pro-icon">
                                        <img :src="item.pro_data.img_url" border="0" width="48px"
                                             height="48px">
                                    </div>
                                    <div class="pro-name">
                                        <small> {{formatUnit(item.pro_data.prochar_id,'ID') + (item.pro_data.brand_name ? ' / '+item.pro_data.brand_name :'')+ (item.pro_data.model ? ' / '+item.pro_data.model :'')}}
                                        </small>
                                        <br>
                                        {{item.pro_data.pro_name}}
                                    </div>
                                </div>
                            </td>
                            <td align="right">
                                {{item.pro_data.prochar_qty}}
                                <small class="unit">PCS/CTN</small>
                                <br>
                                {{item.pro_data.ctn_size}}
                                <small class="unit">CM</small>
                            </td>
                            <td v-if="isshow_search">{{item.warsename}}</td>
                            <!--总库存和总箱数-->
                            <td align="right">
                               {{formatUnit(item.qty,'PCS')}}
                                <small class="unit">PCS</small>
                                <br>
                              {{formatUnit(item.qty/item.pro_data.prochar_qty,'CTN')}}
                                <small class="unit">CTN</small>
                            </td>
                            <!--这个仓库的库存-->
                            <td align="right">
                                {{formatUnit(item.qtys,'PCS')}}
                                <small class="unit">PCS</small>
                                <br>
                                {{formatUnit(item.qtys/item.pro_data.prochar_qty,'CTN')}}
                                <small class="unit">CTN</small>
                            </td>
                            <!--这个仓库的销售量-->
                            <td align="right">
                                {{formatUnit(item.sale_qtys,'PCS')}}
                                <small class="unit">PCS</small>
                                <br>
                                {{formatUnit(item.sale_qtys/item.pro_data.prochar_qty,'CTN')}}
                                <small class="unit">CTN</small>
                            </td>
                            <td align="right">
                                <!--遗失数量check_id>0-->
                                {{formatUnit(item.missing_qty,'PCS')}}
                                <small class="unit">PCS</small>
                                <br>
                                <!--遗失数量check_id==0-->
                                {{formatUnit(item.missing_qtys,'PCS')}}
                                <small class="unit">PCS</small>
                                <br>
                            </td>
                            <td align="right">
                                <!--调正数量-->
                                {{item.adjust_qty==0?'-':item.adjust_qty}}
                                <small class="unit">PCS</small>
                                <br>
                                {{formatUnit(item.adjust_qty/item.pro_data.prochar_qty,'CTN')}}
                                <small class="unit">CTN</small>
                            </td>
                            <td align="right">
                                <button class="btn btn-sm btn-default"
                                        @click="detailadjust(item.pro_id,item.prochar_id,item.warsename,item.warehouse_id,1)" data-toggle="modal"
                                        data-target="#store_detailModal">
                                    详情
                                </button>
                                <button class="btn btn-sm btn-primary"
                                        @click="detailadjust(item.pro_id,item.prochar_id,item.warsename,item.warehouse_id,2)" data-toggle="modal"
                                        data-target="#store_adjustModal">
                                    调整
                                </button>
                            </td>
                        </tr>

                        <tr style="text-align: center;" v-if="list.length==0">
                            <td colspan="8" class="no_date">{:lang('no_data')}</td>
                        </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="pagination" v-show="list.length!=0">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 仓库 产品 详情页 -->
    <div class="modal fade" id="store_detailModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:80vw">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">仓库（{{name}}）产品详情</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-dismissable alert-info">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4> 信息框 </h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="row" style="padding:1rem 2rem">
                                    <div class="col-md-9">
                                        <div class="pro">
                                            <div class="pro-icon">
                                                <img :src="topdata.img_url" border="0" width="48px"
                                                     height="48px">
                                            </div>
                                            <div class="pro-name">
                                                <small> {{formatUnit(topdata.prochar_id,'ID') + (topdata.brand_name ? ' / '+topdata.brand_name :'')+ (topdata.model ? ' / '+topdata.model :'')}}
                                                </small>
                                                <br>
                                                {{topdata.pro_name}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-right">
                                        {{topdata.prochar_qty}}
                                        <small class="unit">PCS/CTN</small>
                                        <br>
                                        {{topdata.ctn_size}}
                                        <small class="unit">CM</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">状态</div>
                                <table class="table table-hover">
                                    <tbody>
                                    <tr>
                                        <td>总数</td>
                                        <td align="right">
                                            {{formatUnit(leftdata.qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <!--该仓库的总数-->
                                        <td align="right">
                                            {{leftdata.qty?leftdata.qty:''}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>已售</td>
                                        <td align="right">
                                            {{formatUnit(leftdata.sale_qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <!--该仓库的销售总数-->
                                        <td align="right">
                                            {{leftdata.sale_qty?leftdata.sale_qty:''}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>遗失</td>
                                        <td align="right">
                                            {{formatUnit(leftdata.missing_qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <!--该仓库的遗失总数-->
                                        <td align="right">
                                            {{leftdata.missing_qty?leftdata.missing_qty:''}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>调整</td>
                                        <td align="right">
                                            {{formatUnit(leftdata.adjust_qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <!--该仓库的调整总数-->
                                        <td align="right">
                                            {{leftdata.adjust_qty?leftdata.adjust_qty:''}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">存放位置</div>
                                <table class="table table-hover">
                                    <tbody>
                                    <tr v-for="item in placedata" :key="item.place_id">
                                        <td>{{item.place_name}}</td>
                                        <td align="right">
                                            {{formatUnit(item.qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <td align="right">
                                            {{item.qty}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    <tr style="text-align: center;" v-if="placedata.length==0">
                                        <td colspan="3" class="no_date">{:lang('no_data')}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">区域库存</div>
                                <table class="table table-hover">
                                    <tbody>
                                    <tr v-for="item in areadata" :key="item.area_id">
                                        <td>{{item.area_name}}</td>
                                        <td align="right">
                                            {{formatUnit(item.qty/topdata.prochar_qty,'CTN')}}
                                            <small class="unit">CTN</small>
                                        </td>
                                        <td align="right">
                                            {{item.qty}}
                                            <small class="unit">PCS</small>
                                        </td>
                                    </tr>
                                    <tr style="text-align: center;" v-if="areadata.length==0">
                                        <td colspan="3" class="no_date">{:lang('no_data')}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 仓库产品调整登记 -->
    <div class="modal fade" id="store_adjustModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:60%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">仓库({{name}})产品调整登记</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-dismissable alert-info">
                                <button type="button" class="close">×</button>
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="row" style="padding:1rem 2rem">
                                    <div class="col-md-9">
                                        <div class="pro">
                                            <div class="pro-icon">
                                                <img :src="topdata.img_url" border="0" width="48px"
                                                     height="48px">
                                            </div>
                                            <div class="pro-name">
                                                <small> {{formatUnit(topdata.prochar_id,'ID') + (topdata.brand_name ? ' / '+topdata.brand_name :'')+ (topdata.model ? ' / '+topdata.model :'')}}
                                                </small>
                                                <br>
                                                {{topdata.pro_name}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-right">
                                        {{topdata.prochar_qty}}
                                        <small class="unit">PCS/CTN</small>
                                        <br>
                                        {{topdata.ctn_size}}
                                        <small class="unit">CM</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <td>仓库</td>
                                    <td>{{warsedata.warsename}}</td>
                                </tr>
                                <tr>
                                    <td>库存数量</td>
                                    <td>{{warsedata.qty}}
                                        <small class="unit">PCS</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td>销售数量</td>
                                    <td>{{warsedata.sale_qty}}
                                        <small class="unit">PCS</small>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <td><label class="lh-3" for="adjust_qty">调整数量<span class="required"></span></label>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input id="adjust_qty" type="number" class="form-control text-right"
                                                   v-model="num">
                                            <span class="input-group-addon"><small>PCS</small></span>
                                        </div>

                                    </td>
                                </tr>
                                <tr>
                                    <td><label class="lh-3" for="adjust_qty">调整备注<span class="required"></span></label>
                                    </td>
                                    <td>
                                        <select name="" id="" class="form-control" v-model="remark">
                                            <option value="">请选择</option>
                                            <option value="add">多余</option>
                                            <option value="broken">损坏</option>
                                            <option value="lost">丢失</option>
                                        </select>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span
                            class="glyphicon glyphicon-remove"></span>取消
                    </button>
                    <button type="button" class="btn btn-primary" @click="savebtn(topdata.pro_id,topdata.prochar_id,name)">
                        <span class="fa fa-save"></span> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/foot"/}
<script>
    Vue.directive('focus', {
        bind: function (el) {
            el.focus()
        },
        inserted: function (el) {
            el.focus();//自动获取焦点
        },
    });
    var busVM=new Vue();
    var table = new Vue({
        el: '#housedetail',
        data: {
            warehousedata: [],
            page: 1,
            pageSize: 30,
            list: [],
            pauname: '',
            order: 1,
            id: '',
            topdata: [],
            leftdata: [],
            placedata: [],
            areadata:[],
            warsedata: [],
            num: '',
            remark: '',
            name:'',//仓库名称
            isshow_search:false,
            searchText:'',//搜索内容
            warsename:''
        },
        components:{
            'my-header':{
                template:`<div class="ntDesktop-head">仓库列表({{warsename}})</div>`,
                props:{
                    warsename:{
                        type:String,
                        default:''
                    }
                }
            }
        },
        methods: {
            formatUnit: formatUnit,
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(){
                $.ajax({
                    url: "/admin/warehouses/warehousedetail",
                    type: 'post',
                    data: {
                        getdata: '',//获取的标志
                    },
                    dataType: "json",
                    success: (result) => {
                        this.warehousedata = result.warehousedata;
                        var id=this.getQueryString('id');
                        var name='';
                        this.warehousedata.forEach(el=>{
                            if(el.id==id){
                                 name=el.name;
                            }
                        })
                        this.btnwarehouse(id,name,1);
                        this.id=id;
                    }
                })
            },
            //点击每一个仓库的数据
            btnwarehouse(id,name,code){
                if(code==1){
                    //没有搜索条件
                    this.isshow_search=false;
                    this.searchText='';
                }else {
                    this.isshow_search=true;
                }
                this.warsename=name;//仓库名称
                $('.loding').show();
                $.ajax({
                    url: "/admin/warehouses/warehousedetail",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        getdata: '',//获取的标志
                        warehouseid: id,
                        searchText: this.searchText//搜索标志
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.data;
                        if (result.count)
                            this.setPage(parseInt(this.page), result.count)
                        $('.loding').hide()
                    }
                })
            },
            sortfun(type, $event){  //排序
                this.order = $(event.target).attr('data-order')
                //产品的排序
                if (type == 1) {
                    this.pauname = 'prochar_id'
                    this.list.sort(this.sortoneData);
                }
                //所有的仓库的这个产品的总库存数量
                if (type == 2) {
                    this.pauname = 'qty'
                    this.list.sort(this.sortoneData);
                }
                //这个仓库下这个产品的总库存数量
                if (type == 3) {
                    this.pauname = 'qtys'
                    this.list.sort(this.sortoneData);
                }
                //这个仓库下这个产品的销售数量
                if (type == 4) {
                    this.pauname = 'sale_qtys'
                    this.list.sort(this.sortoneData);
                }
                //遗失数量
                if (type == 5) {
                    this.pauname = 'missing_qty'
                    this.list.sort(this.sortoneData);
                }
                //调整数量
                if (type == 6) {
                    this.pauname = 'adjust_qty'
                    this.list.sort(this.sortoneData);
                }
            },
            sortoneData(a, b) {
                if (this.order == 1) {
                    $(event.target).attr('data-order', 2)
                    return b[this.pauname] - a[this.pauname]
                } else {
                    $(event.target).attr('data-order', 1)
                    return a[this.pauname] - b[this.pauname]
                }
            },
            //搜索
            search(){
                if(this.searchText){
                    this.btnwarehouse('','',2)
                }
            },
            //关闭搜索
            shdow(){
                this.searchText='';
                var id=this.getQueryString('id');
                var name='';
                this.warehousedata.forEach(el=>{
                    if(el.id==id){
                        name=el.name;
                    }
                })
                this.btnwarehouse(id,name,1);
            },
            //详情和调整的的点击
            detailadjust(pro_id, prochar_id,warsename,warehouse_id,code){
                this.name=warsename;//仓库名称
                this.id=warehouse_id;
                var resturl = ''
                if (code == 1) {
                    resturl = 'getdetails';
                } else {
                    resturl = 'getadjusts';
                }
                $.ajax({
                    url: "/admin/warehouses/warehousedetail",
                    type: 'post',
                    data: {
                        getdata: resturl,//请求标志
                        warehouseid: warehouse_id,//仓库id
                        pro_id: pro_id,//产品id
                        prochar_id: prochar_id,//产品角色id
                    },
                    dataType: "json",
                    success: (result) => {
                        this.topdata = result.topdata;
                        if (code == 1) {
                            //详情
                            this.leftdata = result.leftdata;
                            this.placedata = result.placedata;
                            this.areadata = result.areadata;
                        } else {
                            //调整
                            this.warsedata = result.warsedata;
                        }

                    }
                })
            },
            //获取的是地址栏参数
            getQueryString(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)return unescape(r[2]);
                return null;
            },
            savebtn(pro_id,prochar_id,name){
                $.ajax({
                    url: "/admin/warehouses/warehousedetail",
                    type: 'post',
                    data: {
                        getdata: 'savedata',//提交的标志
                        warehouse_id: this.id,//仓库id
                        pro_id: pro_id,//产品id
                        prochar_id: prochar_id,//产品角色id
                        qty: this.num,
                        remark: this.remark
                    },
                    dataType: "json",
                    success: (result) => {
                        if (result.status != 1) {
                            change_mes_type('.modal-body .alert',result.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*'+result.msg+'<br>')
                        } else {
                            change_mes_type('#headeralert',result.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*'+result.msg+'<br>')
                            $('#store_adjustModal').modal('toggle');
                            if(this.searchText){
                                //显示
                                this.btnwarehouse(this.id,'',2)
                            }else {
                                //不显示
                                this.btnwarehouse(this.id,name,1)
                            }
                            this.num='';
                            this.remark='';
                        }
                    }
                })
            }
        },
        created(){
            this.getAllList()
        }
    })
    $("#store_adjustModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });

    $("#store_detailModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>